<template>
  <div class="form-container">
    <el-form inline :model="form" ref="refForm" class="form-line" label-width="100px">
      <el-form-item label="姓名/手机号" prop="fullName">
        <el-input size="default" placeholder="姓名/手机号"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" @click="handleRest(refForm as FormInstance)">重置</el-button>
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button type="primary" @click="handleGo">添加站长</el-button>
    </div>
  </div>
  <div class="form-container">
    <Tags :info="2" />
  </div>
  <div class="table-container">
    <el-table
      border
      :cell-style="{ textAlign: 'center', fontSize: '13px' }"
      :header-cell-style="{
        textAlign: 'center',
        fontWeight: '100',
        fontSize: '13px',
        color: 'white',
        backgroundColor: '#009688'
      }"
      style="width: 100%"
      :data="dataList"
    >
      <el-table-column fixed prop="fullName" label="工号" />
      <el-table-column fixed prop="fullName" label="姓名" />
      <el-table-column prop="phonenumber" label="手机号" />
      <el-table-column prop="ifRelateVehicle" label="已关联车辆" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button
            type="primary"
            link
            @click="
              router.push({ path: '/cityLevel/cityOrganization/cityStationer/passedDetail', query: { id: scope.row.userId } })
            "
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background size="small" @change="getList" layout="prev, pager, next" :total="pageTotal" :page-size="10" />
    </div>
  </div>
  <el-dialog v-model="centerDialogVisible" title="修改上岗时间" width="500" center>
    <div>
      <el-form :model="updatePhoneForm" ref="refPhoneForm" :rules="updatePhoneFormRules" label-width="100">
        <el-form-item prop="oldPhonenumber" label="旧手机号">
          <el-input v-model="updatePhoneForm.oldPhonenumber" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="phonenumber" label="新手机号">
          <el-input v-model="updatePhoneForm.phonenumber" placeholder="请填写新手机号"></el-input>
        </el-form-item>
        <el-form-item prop="smsCode" label="新手机验证码">
          <el-input v-model="updatePhoneForm.smsCode" placeholder="请填写短信验证码"></el-input>
          <span class="sms-code"
            ><el-button type="text" :disabled="codeTime > 0" @click="handleGetSmsCode">{{
              codeTime > 0 ? `${codeTime}秒后重新获取` : "获取验证码"
            }}</el-button></span
          >
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdatePhoneSubmit(refPhoneForm as FormInstance)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="timeDialogVisible" title="设置上岗时间" width="500" center>
    <div>
      <el-form :model="updateTime" ref="refTimeForm" :rules="updateTimeFormRules" label-width="100">
        <el-form-item prop="entryDate" label="上岗时间">
          <el-date-picker v-model="updateTime.entryDate" type="date" placeholder="选择上岗时间" style="width: 100%" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateTSubmit(refTimeForm as FormInstance)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="useProTable">
import dayjs from "dayjs";
import { PhoneTime } from "@/api/interface/city/organizationManage";
import { updateAdminOnDutyTimeAPI, updateAdminPhoneAPI } from "@/api/modules/city/organizationAPI";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import Tags from "./tags.vue";
import { Picker } from "@/api/interface/city/cityPicker";
import { getPickerListAPI } from "@/api/modules/city/cityPicker/api";
const router = useRouter();
let pageTotal = ref<number>(0);
let centerDialogVisible = ref<boolean>(false);
let timeDialogVisible = ref<boolean>(false);
let codeTime = ref<number>(0);
const form = ref<Picker.StatusParams>({
  fullName: "",
  auditStatus: "2",
  phonenumber: "",
  province: JSON.parse(localStorage.getItem("userInfo") as string).province,
  city: JSON.parse(localStorage.getItem("userInfo") as string).city,
  pageNum: 1,
  pageSize: 10
});
const updatePhoneForm = ref<PhoneTime.PhoneParams>({
  oldPhonenumber: "",
  phonenumber: "",
  /**
   * 验证码
   */
  smsCode: "",
  /**
   * 用户ID
   */
  userId: 1
});
const updateTime = ref<PhoneTime.TimeParams>({
  userId: 0
});
const refPhoneForm = ref<FormInstance>();
const refTimeForm = ref<FormInstance>();
const updatePhoneFormRules = reactive<FormRules>({
  phonenumber: [
    { required: true, message: "请输入新手机号", trigger: "blur" },
    { type: "string", message: "请输入正确的手机号", trigger: "blur" }
  ],
  smsCode: [
    { required: true, message: "请输入短信验证码", trigger: "blur" },
    { type: "string", message: "请输入正确的短信验证码", trigger: "blur" }
  ]
});
const updateTimeFormRules = reactive<FormRules>({
  entryDate: [{ required: true, message: "请选择上岗时间", trigger: "blur" }]
});
const refForm = ref<FormInstance>();
const dataList = ref<Picker.Row[]>([]);
const handleGetSmsCode = () => {
  if (!updatePhoneForm.value.phonenumber) return ElMessage.error("请填写新手机号");
  codeTime.value = 60;
  let timer = setInterval(() => {
    codeTime.value--;
    if (codeTime.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};
const handleUpdatePhoneSubmit = (elForm: FormInstance) => {
  elForm.validate((valid: boolean) => {
    if (valid) {
      console.log(updatePhoneForm.value);
      // 发送请求
      updatePhoneNumber();
    } else {
      ElMessage.error("请检查输入项");
    }
  });
};
const handleUpdateTSubmit = (elForm: FormInstance) => {
  elForm.validate((valid: boolean) => {
    if (valid) {
      console.log(updateTime.value);
      // 发送请求
      updateTime.value.entryDate = dayjs(updateTime.value.entryDate).format("YYYY-MM-DD");
      updatePickTime();
    } else {
      ElMessage.error("请检查输入项");
    }
  });
};
const handleRest = (formEl: FormInstance) => {
  formEl.resetFields();
  getList();
};
const handleGo = () => {
  router.push({ path: "/cityLevel/cityOrganization/cityPicker/add" });
};
const getList = async () => {
  const { rows, code, msg, total } = await getPickerListAPI(form.value);
  if (code == "200" && rows) {
    dataList.value = rows;
    if (total) {
      pageTotal.value = total;
    }
  } else {
    ElMessage.error(`获取失败,${msg}`);
  }
};
const updatePhoneNumber = async () => {
  const { code, msg } = await updateAdminPhoneAPI(updatePhoneForm.value);
  if (code == "200") {
    ElMessage.success("修改成功");
    centerDialogVisible.value = false;
  } else {
    ElMessage.error(`修改失败,${msg}`);
  }
};
const updatePickTime = async () => {
  const { code, msg } = await updateAdminOnDutyTimeAPI(updateTime.value);
  if (code == "200") {
    ElMessage.success("修改成功");
    timeDialogVisible.value = false;
  } else {
    ElMessage.error(`修改失败,${msg}`);
  }
};
onMounted(() => {
  getList();
  1;
});
</script>
<style lang="scss" scoped>
.form-container {
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  .btn-container {
    display: inline-block;
    float: right;
    vertical-align: middle;
    ::v-deep .el-button > span {
      font-size: 13px;
    }
  }
  .el-form {
    display: inline-block;
    ::v-deep .el-form-item__label {
      font-size: 13px;
    }
  }
  .form-line {
    .el-form-item {
      margin: 0;
      margin-right: 20px;
    }
    .el-input {
      width: 240px;
    }
    .el-select {
      width: 240px;
    }
  }
}
.table-container {
  padding: 40px 10px;
  padding-bottom: 60px;
  background-color: white;
  .pagination-container {
    // display: inline-block;
    float: right;
    margin-top: 20px;
    background-color: white;
  }
}
.sms-code {
  position: absolute;
  right: 5px;
}
::v-deep .el-tag--dark {
  margin: 5px;
  cursor: pointer;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
